<template>
  <div class="sdy-home-hot">
    <div class="top">
      <span>京东秒杀 </span>
      <span>&nbsp;14</span>
      <img src="https://wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png" alt=""> &nbsp;&nbsp;&nbsp;&nbsp;
      <van-count-down @finish="finishHandler" :time="subTime">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </div>
    <div class="bottom">
      <ul>
        <li v-for="item in hotList" :key="item.proid">
          <img :src="item.img1" alt="">
          <span>{{ item.category }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script name="sdyHomeHot" setup lang="ts">
import { showToast } from 'vant'
import { getHotList } from '../../../model/goods'
import { onMounted, ref } from 'vue'
// 准备一个目标时间
//   说明: 这个时间应该是服务器给的
//   现在: 咱们自己定一个时间
const targetTime = new Date('2023/6/30 16:59:30')
// 计算当前时间和目标时间之间的时间差
const subTime = targetTime.getTime() - new Date().getTime()

// 倒计时完成时的事件处理函数
const finishHandler = () => {
  // 提示用户 秒杀已经结束了
  showToast({
    message: '该下课了',
    icon: 'like-o'
  })
}

// 定义接口
interface HotGoodsInfo {
  img1?: string
  proid?: string
  category?: string
  [key: string]: any
}

interface Response {
  code: string
  data: Array<HotGoodsInfo>
}

const hotList = ref<Array<HotGoodsInfo>>([])

// 热门商品列表
onMounted(async () => {
  const res = await getHotList()
  if ((res as unknown as Response).code !== '200') return
  hotList.value = res.data
})
</script>

<style lang="scss" scoped>
.sdy-home-hot {
  height: 200px;
  margin-top: 60px;
  background-color: #fff;
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  > .top {
    margin-top: 5px;
    height: 45px;
    background-image: url();
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    font-size: 20px;
    

    > span {
      font-size: 20px;


      &:first-child {
        margin: 0 10px 0 20px;
      }

      &:last-of-type {
        margin-right: 20px;
        color: red;
      }
    } 
  }

  > .bottom {
    flex: 1;
    box-sizing: border-box;
    padding-left: 15px;
    overflow: auto;
    margin-top: 10px;

    > ul {
      display: flex;


      > li {
        width: 100%;
        height: 100px;
        margin-right: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;

        > img {
          width: 90px;
          height: 90px;
          display: block;
        }

        > span {
          font-size: 20px;
          margin-top: 3px;
          color: red;
        }
      }
    }
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: red;

}
.block {
  display: inline-block;
  border-radius: 5px;
  width: 20px;
  height: 25px;
  color: #fff;
  font-size: 15px;
  text-align: center;
  background-color: red;
}
</style>
